<template>
	<view class="content">
		<view class="reviews">
			<text class="user-name">{{uname}}</text>
			<text class="conector">{{local_review.to=='post'?'评论':'回复'}}</text>
			<text v-if="local_review.to!='post'" class="user-review">{{to_uname}}</text>
			：<text>{{local_review.content}}</text>
		</view>
		<view class="bottom">
			<LittleTools @clicked="clickItem" :items="items" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "ReviewComponent",
		data() {
			return {
				local_review: null,
				items:null
			};
		},
		props: {
			review: {
				type: Object,
				required: true
			}
		},
		beforeMount() {
			this.local_review = {
				...this.review
			}
			this.items = [{
							name: "clock",
							text: this.local_review.time
						}, {
							name: this.local_review.state_info.thumbed?"thumb-up-fill":'thumb-up',
							text: this.local_review.thumbs
						}, {
							name: this.local_review.state_info.thumbed_down?"thumb-down-fill":"thumb-down",
							text: this.local_review.thumbs_down
						},{
							name:"chat-fill",
							text:"回复"
						}]
		},
		computed: {
			uname() {
				return this.getUserInfo(this.local_review.u_id)
			},
			to_uname() {
				if (this.local_review.to !== 'post') {
					return this.getUserInfo(this.local_review.to)
				}
				return ""
			}
		},
		methods: {
			thumbUp(state){
				console.log("赞了",state);
			},
			thumbDown(state){
				console.log("踩了一脚",state);
			},
			getUserInfo(uid) {
				return "张三"
			},
			clickItem(i_){
					this.items = this.items.map(i=>{

					if(i_.name == 'thumb-up' || i_.name =='thumb-up-fill'){
						if(i.name == 'thumb-up' || i.name == 'thumb-up-fill'){
							if(i.name == 'thumb-up'){
								i.text+=1;
								i.name = 'thumb-up-fill'
								this.thumbUp(true)
							}else{
								i.text-=1;
								i.name = 'thumb-up'
								this.thumbUp(false)
							}
						}
					}
					
					if(i_.name == 'thumb-down' || i_.name == 'thumb-down-fill'){
						if(i.name == 'thumb-down' || i.name == 'thumb-down-fill'){
							if(i.name == 'thumb-down'){
								i.text+=1;
								i.name = 'thumb-down-fill'
								this.thumbDown(true)
							}else{
								i.text-=1;
								i.name = 'thumb-down'
								this.thumbDown(false)
							}
						}
					}
					
					return i;
				})
				
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding: 2rpx 10rpx;
		flex-direction: column;
		letter-spacing: 4rpx;

		.reviews {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 14px;

			.user-name,
			.user-review {
				font-weight: 500;
			}

			.conector {
				color: rgba($u-primary, 0.8);
			}
		}

		.bottom {
			width: 100%;
		}

	}
</style>